<template>
  <n-layout has-sider>
    <n-layout-sider content-style="padding: 24px;"> 
      <router-link to="/commodity">商品</router-link>
      <router-link to="/ctc">类目</router-link>
    </n-layout-sider>
    <n-layout>
      <n-layout-header>
        <modal>
          <!-- 新增 -->
          <n-grid x-gap="12" :cols="4">
            <n-gi>
              <div style="display: flex; justify-content: flex-end">
                <n-button round type="primary" @click="handleAdd">
                  新增
                </n-button>
              </div>
            </n-gi>
          </n-grid>
          <!-- 输入框 -->
          <n-data-table
            :columns="columns"
            :data="data"
            :pagination="pagination"
            :bordered="false"
          />
          <!-- 弹出框 -->
          <n-modal
            v-model:show="showModal"
            :mask-closable="false"
            preset="dialog"
          >
            <!-- 表单信息 -->
            <CateFrom
              :CateFromData="CateFromData"
              @canHandle="canHandle"
              @handleConfirm="handleConfirm"
            ></CateFrom>
          </n-modal>

           <!-- 添加弹出框 -->
           <n-modal
            v-model:show="showModalAdd"
            :mask-closable="false"
            preset="dialog"
          >
            <!-- 表单信息 -->
            <CateAdd>
            </CateAdd>
          </n-modal>
        </modal>
      </n-layout-header>
      <n-layout-content content-style="padding: 24px;">
        平山道
      </n-layout-content>
      <n-layout-footer>成府路</n-layout-footer>
    </n-layout>
  </n-layout>
</template>

<script>
import { h, defineComponent, ref } from "vue";
import CateFrom from "../views/CateFrom.vue";
import CateAdd from "../views/CateAdd.vue"
import {
  NButton,
  createDiscreteApi,
  NDataTable,
  NModal,
  NCard,
  NGrid,
  NGi,
  NLayout,
  NLayoutHeader,
  NLayoutContent,
  NLayoutFooter,
  NSpace,
} from "naive-ui";

const createColumns = ({ updateCate, deleteCate }) => {
  return [
    {
      title: "id",
      key: "id",
    },
    {
      title: "name",
      key: "name",
    },
    {
      title: "操作",
      key: "actions",
      render(row) {
        // 注意这里是数组
        return [
          h(
            NButton,
            {
              text: true,
              style: { marginRight: "10px" },
              onClick: () => updateCate(row),
            },
            { default: () => "修改" }
          ),
          h(
            NButton,
            {
              text: true,
              onClick: () => deleteCate(row),
            },
            { default: () => "删除" }
          ),
        ];
      },
    },
  ];
};

export default defineComponent({
  components: {
    NButton,
    createDiscreteApi,
    NDataTable,
    NModal,
    NCard,
    CateFrom,
    NGrid,
    NGi,
    NLayout,
    NLayoutHeader,
    NLayoutContent,
    NLayoutFooter,
    NSpace,
    CateAdd
  },
  setup() {
    const data = [
      { id: 3, name: "你的名字" },
      { id: 4, name: "我的方式" },
      { id: 12, name: "冬天" },
    ];
    const CateFromData = ref({});
    const message = createDiscreteApi(["message"]).message;
    const showModalRef = ref(false);
    const showModalAdd = ref(false);
    return {
      showModalAdd:showModalAdd,
      CateFromData,
      // 表单数据
      // 遮罩
      showModal: showModalRef,
      // 弹出框
      data,
      // 新增
      handleAdd() {
        showModalAdd.value = true;
      },
      // 取消
      canHandle(params) {
        showModalRef.value = false;
        params = null;
      },
      // 确认
      handleConfirm(params) {
        console.log(params, "确认");
        // showModalRef.value = false;
      },
      columns: createColumns({
        // 弹出框修改按钮
        updateCate(row) {
          CateFromData.value = row;
          showModalRef.value = true;
        },
        // 弹出框删除按钮
        deleteCate(row) {
          message.info(`Play ${row.title}`);
        },
      }),
      pagination: false,
    };
  },
});
</script>

<style>
</style>

